<template>
    <el-dialog :close-on-click-modal="false"
               :title="!dataForm.id ? '新增私海商机' : '修改私海商机'"
               :visible.sync="visible">
        <el-form ref="dataForm"
                 :model="dataForm"
                 :rules="dataRule"
                 label-width="100px"
                 @keyup.enter.native="dataFormSubmit()">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="客户行业" prop="biz5">
                        <el-select v-model="dataForm.biz5" placeholder="请选择">
                            <el-option
                                v-for="item in custIndustryList"
                                :key="item.industryCode"
                                :label="item.industryName"
                                :value="item.industryCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户来源" prop="cusSource">
                        <el-select v-model="dataForm.cusSource" placeholder="请选择">
                            <el-option
                                v-for="item in lyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="渠道" prop="cusChannel">
                        <el-select v-model="dataForm.cusChannel" placeholder="请选择">
                            <el-option
                                v-for="item in custChannelList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
<!--                <el-col :span="8">-->
<!--                    <el-form-item label="发现人" prop="discoverMan">-->
<!--                        <el-select v-model="dataForm.discoverMan" placeholder="请选择" @change="changeDisCover">-->
<!--                            <el-option-->
<!--                                v-for="item in personList"-->
<!--                                :key="item.id"-->
<!--                                :label="item.empName"-->
<!--                                :value="item.id">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="8">-->
<!--                    <el-form-item label="跟进人">-->
<!--                        <el-select v-model="dataForm.currTraceMan" placeholder="请选择">-->
<!--                            <el-option-->
<!--                                v-for="item in personList"-->
<!--                                :key="item.id"-->
<!--                                :label="item.empName"-->
<!--                                :value="item.id">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label="客户名称"
                                  prop="cusName">
                        <el-input v-model="dataForm.cusName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="沟通方式" prop="cusCommWay">
                        <el-select v-model="dataForm.cusCommWay" placeholder="请选择">
                            <el-option
                                v-for="item in custWayList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="联系方式"
                                 >
                        <el-input v-model="dataForm.cusMobile"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人" prop="cusConnectMan">
                        <pic-upload v-model="dataForm.cusConnectMan"></pic-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="客户描述"
                          prop="cusDesc">
                <el-input v-model="dataForm.cusDesc"></el-input>
            </el-form-item>

            <el-form-item label="省份">
                <el-col :span="8">
                    <el-form-item prop="cusProvince">
                        <el-select v-model="dataForm.cusProvince"
                                   placeholder="请选择"
                                   @change="selectProvince">
                            <el-option v-for="province in provinceList"
                                       :key="province.areaId"
                                       :label="province.areaName"
                                       :value="province.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="cusCity">
                        <el-select v-model="dataForm.cusCity"
                                   placeholder="请选择"
                                   @change="selectCity">
                            <el-option v-for="city in cityList"
                                       :key="city.areaId"
                                       :label="city.areaName"
                                       :value="city.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="cusAddress">
                        <el-select v-model="dataForm.cusAddress"
                                   placeholder="请选择">
                            <el-option v-for="area in areaList"
                                       :key="area.areaId"
                                       :label="area.areaName"
                                       :value="area.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="地址"
                          prop="biz4">
                <el-input v-model="dataForm.biz4"
                          placeholder="地址"></el-input>
            </el-form-item>
            <el-form-item label="产品意向"
                          prop="buyIntention">
                <el-input v-model="dataForm.buyIntention"
                          placeholder="产品意向"></el-input>
            </el-form-item>
            <el-form-item label="备注"
                          prop="biz7">
                <el-input v-model="dataForm.biz7"
                          placeholder="备注"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary"
                 @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>
</template>

<script>
import {Debounce} from '@/utils/debounce'
import {khhyList, sjTypeList} from '@/utils/data'
import PicUpload from "@/components/pic-upload/index.vue";

export default {
    components: {PicUpload},
    data () {
        return {
            visible: false,
            roleList: [],
            personList: [],
            sjTypeList: khhyList,
            custIndustryList: [],
            custList: [],
            provinceList: [],
            cityList: [],
            areaList: [],
            lyList: [
                {label : "淘宝",value: '淘宝'},
                {label : "抖音",value: '抖音'},
                {label : "展会",value: '展会'},
                {label : "市场活动",value: '市场活动'},
                {label : "其他",value: '其他'},
            ],
            custWayList: [
                {label : "微信",value: '微信'},
                {label : "电话",value: '电话'},
                {label : "短信",value: '短信'},
                {label : "抖音",value: '抖音'},
                {label : "上门拜访",value: '上门拜访'},
                {label : "客户上门",value: '客户上门'},
            ],
            custChannelList: [
                {label : "经销商",value: '经销商'},
                {label : "代理商",value: '代理商'},
                {label : "一般客户",value: '一般客户'},
            ],
            dataForm: {
                id: null,
                cusSource: '',
                cusChannel: '',
                cusCommWay: '',
                cusConnectMan: '',
                busiOppoType: '私海',
                cusCode: '',
                cusName: '',
                cusDesc: '',
                cusMobile: '',
                cusProvince: '',
                cusCity: '',
                cusAddress: '',
                buyIntention: '',
                discoverMan: '',
                currTraceMan: '',
                biz4: '',
                biz5: '',
                biz6: '',
                biz7: ''
            },
            dataRule: {
                cusName: [
                    {required: true, message: '请输入客户名称', trigger: 'blur'}
                ],
                cusSource: [
                    {required: true, message: '请选择客户来源', trigger: 'change'}
                ],
                cusChannel: [
                    {required: true, message: '请选择渠道', trigger: 'change'}
                ],
                cusCommWay: [
                    {required: true, message: '请选择沟通方式', trigger: 'change'}
                ],
                discoverMan: [
                    {required: true, message: '请选择提出人', trigger: 'change'}
                ],
                cusProvince: [
                    {required: true, message: '请选择省份', trigger: 'change'}
                ],
                cusCity: [
                    {required: true, message: '请选择城市', trigger: 'change'}
                ],
                cusAddress: [
                    {required: true, message: '请选择区域', trigger: 'change'}
                ],
                currTraceMan: [
                    {required: true, message: '请选择当前跟踪人', trigger: 'change'}
                ],
                cusDesc: [
                    {required: true, message: '客户描述不能为空', trigger: 'blur'}
                ],
                biz4: [
                    {required: true, message: '地址不能为空', trigger: 'blur'}
                ],
                buyIntention: [
                    {required: true, message: '产品意向不能为空', trigger: 'blur'}
                ],
                cusMobile: [
                    {required: true, message: '联系方式不能为空', trigger: 'blur'}
                ],
                biz5: [
                    {required: true, message: '请选择客户行业', trigger: 'change'},
                ],
            }
        }
    },
    methods: {
        init (id) {
            this.dataForm.id = id || ''
            this.visible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].resetFields()
                if (this.dataForm.id) {
                    this.$http({
                        url: this.$http.adornUrl('/crm/oppo/info/' + this.dataForm.id),
                        method: 'get',
                        params: this.$http.adornParams()
                    }).then(({data}) => {
                        this.dataForm = data
                    })
                }
                this.listAreaByParentId().then(({data}) => {
                    this.provinceList = data
                })
                this.$http({
                    url: this.$http.adornUrl('/crm/base/emp/page'),
                    method: 'get',
                    params: this.$http.adornParams(Object.assign({
                        current: 1,
                        size: 1000
                    }))
                }).then(({data}) => {
                    this.personList = data.obj.records

                })
                this.$http({
                    url: this.$http.adornUrl('/crm/base/cusIndustry/page'),
                    method: 'get',
                    params: this.$http.adornParams(
                        Object.assign(
                            {
                                current: 1,
                                size: 100
                            }
                        )
                    )
                }).then(({data}) => {
                    this.custIndustryList = data.obj.records

                })
            })
        },
        changeDisCover(){
            this.dataForm.currTraceMan = this.dataForm.discoverMan
        },
        listAreaByParentId (pid) {
            if (!pid) pid = 0
            return this.$http({
                url: this.$http.adornUrl(`/admin/area/listByPid`),
                method: 'get',
                params: this.$http.adornParams({pid})
            })
        },
        // 选择省
        selectProvince (val) {
            this.dataForm.cusCity = null
            this.dataForm.city = ''
            // 获取城市的select
            this.listAreaByParentId(val).then(({data}) => {
                this.cityList = data
            })
        },
        // 选择市
        selectCity (val) {
            this.dataForm.areaId = null
            this.dataForm.area = ''
            // 获取区的select
            this.listAreaByParentId(val).then(({data}) => {
                this.areaList = data
            })
        },
        // 表单提交
        dataFormSubmit: Debounce(function () {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    // let discoverMan = this.personList.find((item) => {
                    //     return item.id === this.dataForm.discoverMan
                    // })
                    // let currTraceMan = this.personList.find((item) => {
                    //     return item.id === this.dataForm.currTraceMan
                    // })
                    if(wfy.empty(this.dataForm.cusMobile) && wfy.empty(this.dataForm.cusConnectMan)){
                        return this.$message.warning("客户联系方式和联系人不能全部为空！")
                    }
                    let intHy = this.custIndustryList.find((item) => {
                        return item.industryCode === this.dataForm.biz5
                    })
                    let cusProvince = this.provinceList.find((p) => {
                        return p.areaId === this.dataForm.cusProvince
                    })
                    let cusCity = this.cityList.find((p) => {
                        return p.areaId === this.dataForm.cusCity
                    })
                    let cusAddress = this.areaList.find((p) => {
                        return p.areaId === this.dataForm.cusAddress
                    })
                    this.$http({
                        url: this.$http.adornUrl( this.dataForm.id ? '/crm/oppo/updOppo' :'/crm/oppo/saveBusiOppo'),
                        method: 'post',
                        data: this.$http.adornData({
                            ...this.dataForm,
                            busiOppoType: "私海",
                            id: this.dataForm.id ? this.dataForm.id : wfy.uuid(32),
                            // biz2: discoverMan.empName,
                            // biz3: currTraceMan.empName,
                            biz6: intHy.industryName,
                            cusProvince: this.dataForm.cusProvince.length < 10 ? this.dataForm.cusProvince : cusProvince.areaName,
                            cusCity: this.dataForm.cusCity.length < 10 ? this.dataForm.cusCity : cusCity.areaName,
                            cusAddress: this.dataForm.cusAddress.length < 10 ? this.dataForm.cusAddress : cusAddress.areaName,
                            cusStatus: '2'
                        })
                    }).then(({data}) => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    })
                }
            })
        })
    }
}
</script>
